<template>
  <div class="GdwyyAppJfgd">
    <GdwyyAppCard :list="list" @changeCard="handleChangeCard" :showNum="true" :dataModel="topNums"></GdwyyAppCard>

    <div class="main-box">
      <GdwyyAppSmallTitle :title="currentCard.label || list[0].label" :showDw="false"></GdwyyAppSmallTitle>

      <van-loading v-if="loading" type="spinner" color="#1989fa" />
      <a-table
        v-else
        :columns="tableColumns"
        :data-source="tableData"
        :bordered="true"
        :pagination="pagination"
        size="small"
        :scroll="{ x: 1600, y: 450 }"
        @change="handleTableChange"
      >
      </a-table>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { showZwtNav } from '@/utils/showNav.js'
import { sql2apiAction } from '@api/manage'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import { GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'

import GdwyyAppCard from '../components/card.vue'
const apiConfig = [
  {
    url: '8a31cdd68b28dfb0018b558a18fa0007',
    resultParamsName: 'topNums',
    loading: 'topNumLoading',
  },
]
export default {
  name: 'GdwyyAppJfgd',
  components: { GdwyyAppCard, GdwyyAppSmallTitle },
  mixins: [reconsitutionMixin],
  data() {
    return {
      pageTitle: '',
      queryParam: {},
      topNumLoading: false,
      list: [
        {
          label: '派单',
          icon: 'icon_zllc',
          value: 0,
          model: 'pdl',
        },
        {
          label: '在途',
          icon: 'icon_lxyh',
          value: 1,
          model: 'ztl',
        },
        {
          label: '竣工',
          icon: 'icon_sm',
          value: 2,
          model: 'jgl',
        },
        {
          label: '退单',
          icon: 'icon_jg',
          value: 3,
          model: 'tdl',
        },
      ],
      tableColumns: [
        // {
        //     title: '营服名称',
        //     dataIndex: 'grid_name',
        //     align: 'center',
        // },
        {
            title: '包区',
            dataIndex: 'bq_name',
            align: 'center',
            width: 90,
        },
        {
            title: '目标市场',
            dataIndex: 'VILLAGE_NAME',
            align: 'center',
            width: 100,
        },
        {
            title: '分光器',
            dataIndex: 'FGQ_CODE',
            align: 'center',
            width: 160,
        },
        {
            title: '工单类型',
            dataIndex: 'SERVICE_TYPE',
            align: 'center',
            width: 120,
        },
        // {
        //   title: '工单类型',
        //   dataIndex: 'KPI_ID',
        //   align: 'center',
        //   width: 100,
        // },
        {
            title: '工单编号',
            dataIndex: 'ORDER_NUMBER',
            align: 'center',
            width: 160,
        },
        {
            title: '维护单位',
            dataIndex: 'MAINTAIN_UNIT',
            align: 'center',
        },
        {
            title: '业务号码',
            dataIndex: 'SERIAL_NUMBER',
            align: 'center',
            width: 140,
        },
        {
            title: '客户编码',
            dataIndex: 'USER_ID',
            align: 'center',
            width: 140,
        },
        {
            title: '客户名称',
            dataIndex: 'CUST_NAME',
            align: 'center',
            width: 110,
        },
        {
            title: '装机地址',
            dataIndex: 'INSTALL_LOCATION',
            align: 'center',
            width: 210,
        },
        {
            title: '接单人',
            dataIndex: 'STAFF_NAME',
            align: 'center',
            width: 100,
        },
        {
            title: '接单人OA工号',
            dataIndex: 'JDR_DEVELOP_ID_OA',
            align: 'center',
            width: 120,
        },
      ],
      tableData: [],
      pagination: {
        position: 'bottom',
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: false,
      currentCard: {},
      overviewData: {},

      orderKeyMap: {
        "装机": ['JF_0001','JF_0002','JF_0003','JF_0004'],
        "移机": ['JF_0005','JF_0006','JF_0007','JF_0008'],
        "修机": ['JF_0009','JF_0010','JF_0011'],
      },
      url: {
        jfCh: "2c3a07178ba92724018bb9eab5bc0006",
        jfXh: "2c3a07178ba92724018bc78b84db000c",
        chMx: '2c3a07178ba92724018bb86576c40005',
        xhMx: "2c3a07178ba92724018bc3bc3039000b",
      }
    }
  },
  computed: {
    topNums() {
      const { pageTitle, queryParam } = this.$route.query
      const kpiCodes = this.orderKeyMap[pageTitle];
      return {
        pdl: this.overviewData[kpiCodes[0]],
        ztl: this.overviewData[kpiCodes[1]],
        jgl: this.overviewData[kpiCodes[2]],
        tdl: this.overviewData[kpiCodes[3]],
      }
    }
  },

  created() {
    const { pageTitle, queryParam } = this.$route.query
    this.$route.meta.title = this.pageTitle = pageTitle + '详情'
    document.title = this.pageTitle
    showZwtNav(pageTitle)
    this.queryParam = JSON.parse(this.$route.query.queryParam)
    // this.setAllRequest(apiConfig, this.queryParam)
    this.getData();
    this.getTableData()
  },

  methods: {
    handleChangeCard(item) {
      this.currentCard = item
      this.getTableData()
    },

    async getData() {
      let url = "";
      if ( this.queryParam.dayId == moment().format('YYYYMMDD') ) url = this.url.jfXh;
      if ( this.queryParam.dayId < moment().format('YYYYMMDD') ) url = this.url.jfCh;
      const res = await sql2apiAction(url, {
        gridId: this.queryParam.gridId,
        dayId: this.queryParam.dayId,
      })
      const newData = res.result[0] || {}
      this.overviewData = newData
    },
    async getTableData() {
      this.loading = true
      let url = "";
      if ( this.queryParam.dayId == moment().format("YYYYMMDD") ) url = this.url.xhMx;
      if ( this.queryParam.dayId < moment().format("YYYYMMDD") ) url = this.url.chMx;
      const res = await sql2apiAction(url, {
        ...this.queryParam,
        dayId: this.queryParam.dayId == moment().format("YYYYMMDD") ? moment().subtract(1,'d').format("YYYYMMDD") : this.queryParam.dayId,
        // tradeId: this.tradeId,
        // orderStep: this.orderStep, //（1 接单  2 联系用户3 上门4  竣工）
        kpiCode: this.orderKeyMap[this.$route.query.pageTitle][this.currentCard.value || 0],
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
      })
      const data = res.result;
      console.log('---交付工单明细', data.list)
      this.tableData = data.list || []
      this.pagination.total = data.total
      this.card1details22Loading = false

      // const res = await postAction('/Sql2ApiCall/call/8a31cdd68b28dfb0018b558c345b0008', {
      //   ...this.queryParam,
      //   orderStep: this.currentCard.value || 1,
      //   pageNum: Number(this.pagination.current),
      //   pageSize: Number(this.pagination.pageSize),
      // })
      // if (res.success) {
      //   let resultjson = JSON.parse(res.result)
      //   let resultdata = resultjson.data
      //   this.tableData = resultdata.list
      //   this.pagination.current = resultdata.pageNum || 1
      //   this.pagination.total = resultdata.total || 0
      // } else {
      //   this.pagination.current = 0
      //   this.pagination.total = 0
      // }
      this.loading = false
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.getTableData()
    },
  },
}
</script>

<style lang="less" scoped>
.GdwyyAppJfgd {
  box-sizing: border-box;
  background: #fff;
  height: 100vh;
  .main-box {
    padding: 0 8px;
  }
}
</style>